<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=utf-8" 
import="java.util.*"
pageEncoding="utf-8"%>

<% String appName = request.getContextPath(); %>
<html >
<head>
 <meta charset="UTF-8">
<meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>权限管理</title>
</head>
<link rel="stylesheet" type="text/css" href="<%=appName %>/js/themes/metro-orange/easyui.css">
<script type="text/javascript" src="<%=appName %>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=appName %>/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=appName %>/js/jquery.edatagrid.js"></script>
<link rel="stylesheet" type="text/css" href="<%=appName %>/js/themes/icon.css">
<body >
<div style="width:1600px;margin:100px auto">
    <div style="font-size:200%;text-align:center;">系统权限管理</div>

    <table id="task-list" class="easyui-datagrid" title="数据处理进程" style="width:1450px;height:700px"
            data-options="rownumbers:true,
            singleSelect:true,
            url:'<%=appName%>/mvc/security/getPermissions',
            method:'get',
            onLoadError : loadErr,
            loadFilter : loadFilter,
            onRowContextMenu: showMenu,
            updateUrl:'<%=appName%>/mvc/security/modifyPermission',
            autoSave:true,
            toolbar:'#tb'">
        <thead>
            <tr>
                <th data-options="field:'PERMISSION',width:150,editor:{type:'textbox',options:{required:true, missingMessage:'权限名!'}}">用户名</th>
                <th data-options="field:'DESCRIBE',width:200,editor:{type:'textbox'}">描述</th>
                <th data-options="field:'CREATEDT',width:180,align:'center'">创建时间</th>
                <th data-options="field:'CREATOR',width:180,align:'center'">创建者</th>
            </tr>
        </thead>
    </table>
    <div id="tb" style="padding:2px 5px;">
        <a href="#" class="easyui-linkbutton" iconCls="icon-reload" onclick="refresh()" style="float:right;margin-right:20px">刷新</a>
    </div>
    <div id="mm" class="easyui-menu" style="width:120px;">
        <div onclick="addPermission()" data-options="iconCls:'icon-add'">新增</div>
        <div onclick="editPermission()" data-options="iconCls:'icon-edit'">编辑</div>
        <div onclick="delPermission()" data-options="iconCls:'icon-remove'">删除</div>
    </div>
 </div>
 <script type="text/javascript">

var editIndex = undefined;
var clickedRow = undefined;

$.extend($.fn.datagrid.methods, {    
    addEditor : function(jq, param) {   
        if (param instanceof Array) {   
            $.each(param, function(index, item) {  
                var e = $(jq).datagrid('getColumnOption', item.field); 
                e.editor = item.editor; }); 
            } else {    
                var e = $(jq).datagrid('getColumnOption', param.field);    
                e.editor = param.editor;    
            }   
        },  
    removeEditor : function(jq, param) {    
        if (param instanceof Array) {   
            $.each(param, function(index, item) {  
                var e = $(jq).datagrid('getColumnOption', item);   
                e.editor = {};  
                }); 
        } else {    
            var e = $(jq).datagrid('getColumnOption', param);
            e.editor = {};  
        }   
    }
});

function showMenu(e,index,row){
	clickedRow = index;
	saveModify();

	if(index == -1 ) return;
	e.preventDefault();
	$('#mm').menu('show', {
        left: e.pageX,
        top: e.pageY
    });
}
function endEditing(){
    if (editIndex == undefined){return true}
    if ($('#task-list').datagrid('validateRow', editIndex)){
        $('#task-list').datagrid('endEdit', editIndex);
        
        editIndex = undefined;
        return true;
    } else {
        return false;
    }
}
function getChanges(){
    var rows = $('#dg').datagrid('getChanges');
    alert(rows.length+' rows are changed!');
}

function editPermission(index){
    if (endEditing()){
        editIndex = clickedRow;
        $('#task-list').datagrid('selectRow', editIndex)
        .datagrid('beginEdit', editIndex);
    }
}

function addPermission(){
    if (endEditing()){
    	if(clickedRow != -1){
            $('#task-list').datagrid('selectRow', clickedRow)
        }
        var row = $('#task-list').datagrid('getSelected');
        if(row == null){
            $('#task-list').datagrid('appendRow',{});
            editIndex = $('#task-list').datagrid('getRows').length-1;
        }else{
            var insidx = $('#task-list').datagrid('getRowIndex',row) + 1;
            $('#task-list').datagrid('insertRow',{index: insidx,row:{}});
            editIndex = insidx;
        }
        
        $('#task-list').datagrid('selectRow', editIndex)
                .datagrid('beginEdit', editIndex);
    }
}


function delPermission(index){
    
        $('#task-list').datagrid('deleteRow', clickedRow)
        var rows = $('#task-list').datagrid('getChanges');
        var id = rows[0].ID;
        $.ajax({
            url: "<%=appName%>/mvc/security/delPermission",
            type: "POST",
            dataType: "json",
            data: {
            	permissionId: id,
            },
            success: function(data){
                if(data.code=="0"){
                	$('#task-list').datagrid('acceptChanges');
                    $.messager.alert('消息',"操作成功：" + rows[0].PERMISSION + '已被成功删除','info');
                } else {
                    $.messager.alert('错误',data.message,'error');
                }
            },
            error: function(xml){
                $.messager.alert('错误',"连接服务器失败！",'error');
            }
        });
}



function saveModify(){
	var rowIndex = editIndex;
	
	if (endEditing()) {
        var rows = $('#task-list').datagrid('getChanges');
        if(rows.length == 0) return;
        $.ajax({
            url: "<%=appName%>/mvc/security/modifyPermission",
            type: "POST",
            dataType: "json",
            data: {
                param: JSON.stringify(rows),
            },
            success: function(data){
                if(data.code=="0"){
                    //$.messager.alert('消息',"操作成功：操作已保存！" ,'info');
                    $('#task-list').datagrid('acceptChanges');
                    rows[0].ID = data.returnData.ID;
                    rows[0].PERMISSION = data.returnData.PERMISSION;
                    rows[0].CREATEDT = data.returnData.CREATEDT;
                    rows[0].CREATOR = data.returnData.CREATOR;
                    $('#task-list').datagrid('refreshRow', rowIndex);
                } else {
                    $.messager.alert('错误',data.message,'error');
                }
            },
            error: function(xml){
                $.messager.alert('错误',"连接服务器失败！",'error');
            }
        });
	}
    return;
}
function refresh(){
	if (!endEditing()){
		return;
	}
    var rows = $('#task-list').datagrid('getChanges');
    if(rows.length > 0){
        $.messager.confirm('警  告', '你有' + rows.length + '条记录变更后未保存，执行刷新操作后，变更将会丢失。取消刷新回去保存变更?', function(r){
            if (!r){
                return;
            }else{
                $('#task-list').datagrid('reload');
            }
        });
    }else{
        $('#task-list').datagrid('reload');
    }
}
function loadFilter(data){
    if(data.code == '0') {
        $.messager.show({
            //title:'数据刷新完成',
            msg:'数据刷新完成.',
            timeout:5000,
            showType:'slide'
        });
        return data.data;
    }
    $.messager.alert('错误',data.message,'error');
    return null;
}


function formatOper(val,row,index){
      return '&#12288<a href="#" onclick="editPermission(\'' + index + '\')">编辑</a>'
      + '&#12288<a href="#" onclick="delPermission(\'' + index + '\')">删除</a>';
}


function loadErr(){
    $.messager.alert('错误',"loaderr",'error');
}
</script>
</body>

</html>